<template>
  <div class="main">
    <div class="header">
      <img class="header-pic" src="../../assets/pic/farmerHeader.jpg" alt="">
      <div class="user-Avatar-container">
        <el-avatar class="user-Avatar" :size="80" :src="circleUrl"></el-avatar>
        <div class="username">{{loginUser.username}}</div>
      </div>
    </div>
    <div class="body">
      <el-descriptions class="margin-top" title="个人信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{loginUser.username}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            真实姓名
          </template>
          {{loginFarmer.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            性别
          </template>
          <el-tag size="small">{{loginFarmer.sex}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{loginFarmer.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-document"></i>
            邮箱地址
          </template>
          {{loginFarmer.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            收货地址
          </template>
          {{loginFarmer.address}}
        </el-descriptions-item>
        <template slot="extra">
          <el-button type="primary" size="small" @click="dialogVisible = true">修改个人信息</el-button>
          <el-dialog
              title="修改个人信息"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.username" disabled></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
              </el-form-item>
              <el-form-item label="真实姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="ruleForm.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
              <el-form-item label="收件地址" prop="address">
                <el-input type="textarea" v-model="ruleForm.address"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "ChangeFarmerInfo",
  data () {
    return {
      dialogVisible: false,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      ruleForm: {
        id:'',
        uid:'',
        username: '',
        password:'',
        name:'',
        sex:'',
        phone:'',
        email:'',
        address:''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 10, max: 20, message: '长度在 10 到 20 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请填写快递地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.changeFarmer(this.ruleForm)
          this.findFarmerByUid()
          this.$message.success("修改成功")
          this.dialogVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    ...mapActions('farmer',{findFarmerByUid:'findFarmerByUid',changeFarmer:'changeFarmer'})
  },
  computed:{
    ...mapState('user',['loginUser']),
    ...mapState('farmer',['loginFarmer'])
  },
  async created(){
    await this.findFarmerByUid()
    this.ruleForm.username = this.loginUser.username
    this.ruleForm.password = this.loginUser.password
    this.ruleForm.name = this.loginFarmer.name
    this.ruleForm.sex = this.loginFarmer.sex
    this.ruleForm.phone = this.loginFarmer.phone
    this.ruleForm.email = this.loginFarmer.email
    this.ruleForm.address = this.loginFarmer.address
    this.ruleForm.id = this.loginFarmer.id
    this.ruleForm.uid = this.loginUser.id
  }
}
</script>

<style scoped>
.header{
  width: 100%;
  overflow: hidden;
  position: relative;
}

.header-pic{
  width: 100%;
  margin-top: -180px;
}

.user-Avatar-container{
  position: absolute;
  bottom: 10%;
  left: 40px;
}

.user-Avatar{
  float: left;
}

.username{
  color: white;
  float: left;
  height: 80px;
  line-height: 80px;
  font-size: 25px;
  font-weight: bolder;
  margin-left: 20px;
}

.body{
  margin: 20px;
}
</style>